<template>
    <div class="navContainer">
        <div class="left_top_logo d-flex al-center" >
            <div class="logo_class">患者360视图</div>
        </div>
        <div class="state_wrapper flex-1 d-flex al-center" style="overflow: hidden;">
            <div class="leftContainer flex-1 h-100" style="justify-content: flex-end;">
                            <!-- <el-input
                    class="textarea"
                    placeholder="请输入您想搜索的内容"
                    prefix-icon="el-icon-search"
                    v-model="searchInput"
                >
                </el-input> -->
                <div class="d-flex" style="align-items: center;">
                    <!-- 网络波动标识 -->

                </div>
            </div>
            <div style="width: 0; width: 1px; background: #B9B9B9; height: 18px;margin: 0 14px;"></div>
            <div class="rightContainer mr-20">
                <!-- <div class="message mr-12"></div> -->

                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        <div class="d-flex al-center" style="cursor: pointer">
                            <div class="userinfo"></div>
                            {{ accountObject.staffName }}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </div>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a"
                            >{{accountObject.staffName}} ({{ accountObject.staffId }})</el-dropdown-item
                        >
                        <el-dropdown-item command="b"
                            >{{ accountObject.title }}</el-dropdown-item
                        >

                        <el-dropdown-item command="c">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
import _ from "lodash";
import { getRouteItemByMenuItem } from "@utils/router";
import { getStringSet, treeFilter } from "@utils/dataStruct";

import NavManager from "./navManager";
export default {
    data() {
        return {
            // navTabList: [],
            navManager: new NavManager(this, {
                onUpdate: () => {
                    this.updateNavTabList();
                },
            }),
            menuFilterKeyWord: "",
            // searchInput: "",
        };
    },
    computed: {
        accountObject() {
            return this.$store.state.account.accountObject || {};
        },
        isAdmin() {
            return _.get(this, "accountObject.tenantId") === "-1";
        },
        navTabList() {
            return this.$store.state.global.navTabList;
        },
        menuList() {
            let keepMap = {};
            let out = treeFilter(
                this.$store.state.account.menuList || [],
                (item, parentArray) => {
                    if (
                        this.menuFilterKeyWord &&
                        !(item.children && item.children.length) &&
                        !item.name.includes(this.menuFilterKeyWord)
                    ) {
                        if (!parentArray.filter((v) => keepMap[v.key]).length) {
                            return false;
                        }
                    }

                    if (item.name.includes(this.menuFilterKeyWord)) {
                        keepMap[item.key] = true;
                    }

                    let itemSet = getStringSet(item.description, "--");

                    if (itemSet.adminOnly && !this.isAdmin) {
                        return false;
                    }

                    if (itemSet.adminOnlyHide && this.isAdmin) {
                        return false;
                    }
                    if (itemSet.menuIconType) {
                        item.menuIconType = itemSet.menuIconType;
                    }
                    if (itemSet.frontName) {
                        item.frontName = itemSet.frontName;
                    }

                    return true;
                }
            );

            // out.unshift({
            //     name: "首页",
            //     key: "main",
            //     type: "menu",
            //     description: "<%frontName=main%>",
            //     menuIconType: "s-home",
            // });

            return out;
        },
    },
    methods: {
        handleCommand(e) {
            switch (e) {
                case "c":
                    this.logoutHandle();
                    break;

                default:
                    break;
            }
        },
        logoutHandle() {
            this.$store.dispatch("account/logout");
        },
        updateNavTabList() {
            this.navTabList = [...this.navManager.navTabList];
        },
        isOnShowFullPath(fullPath) {
            return this.$route.fullPath === fullPath;
        },
        /**
         * @method 菜单点击
         * @param {String} 路由名
         */
        menuClickHandle(item) {
            let routeSet = getRouteItemByMenuItem(item);

            if (routeSet.name === "iframe") {
                const { path } = this.$route.query || {};

                if (path === item.path) {
                    return;
                }
            } else if (this.$route.name === routeSet.name) {
                return;
            }
            this.navManager.jumpTo(routeSet);
        },
        removeRoute(fullPath) {
            this.navManager.removeItem(fullPath);
        },
        pushRoute(routeSet) {
            this.navManager.jumpTo(routeSet);
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@assets/variables.scss";
.lingdang {
    width: 16px;
    height: 16px;
    background-image: url("./images/lingdang.png");
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-right: 25px;
    cursor: pointer;
}
.message {
    width: 16px;
    height: 16px;
    background-image: url("./images/message.png");
    background-size: cover;
    background-position: 50% 50%;
    cursor: pointer;
}
.userinfo {
    width: 30px;
    height: 30px;
    background-image: url("./images/userinfo.png");
    background-size: cover;
    background-position: 50% 50%;
    margin-right: 8px;
    cursor: pointer;
}
.info {
    cursor: pointer;
}
.textarea ::v-deep  .el-input__inner {
    width: 350px !important;
    height: 30px !important;
    line-height: 30px;
    border-radius: 15px !important;
}
.textarea ::v-deep  .el-input__icon {
    line-height: 30px;
}
.textarea {
    width: 350px !important;
    margin-right: 30px;
}
.leftContainer {
    display: flex;
    align-items: center;
}
.navContainer {
    background: #fff;
    height: 70px;
    color: #7c7e84;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    //position: relative;
    //z-index: 2333;
    &::v-deep {
        .el-dropdown {
            color: #7c7e84;
        }
    }
}
.left_top_logo {
    height: 70px;
    width: 220px;
    background: #041e2d;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo_class {
        // background-image: url("~@/assets/logo.png");
        color: $--color-primary;
        // width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        padding: 18px 8px;
        background-origin: content-box;
    }
}
.top_icon {
    display: inline-block;
    padding: 4px 8px;
    cursor: pointer;
    color: #fff;
    font-size: 14px;

    &:hover {
        color: #eee;
    }
}
.navTabItem {
    padding: 4px 8px;
    display: inline-block;
    cursor: pointer;
    color: #fff;

    &:hover {
        color: #eee;
    }

    &.actived {
        background-color: $--color-primary;
    }

    .closeButton {
        color: #fff;

        &:hover {
            color: #eee;
        }
    }
}
.rightContainer {
    display: flex;
    justify-items: center;
    align-items: center;
}
.flex-al-center {
    display: flex;
    align-items: center;
}
</style>

<style lang="scss">
.topNavMenuContainer.el-dropdown-menu {
    padding-right: 0;
    min-width: 200px;

    .el-menu {
        border-right: 0;
    }

    .el-menu-item,
    .el-submenu__title,
    .el-submenu .el-menu-item {
        height: 32px;
        line-height: 32px;
    }
}
</style>
